<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBrES1n4h0Fk1agKt-3WAMS16ollUl1lfk"></script>
<script type="text/javascript">
	
	$(document).ready(function(){
		$.ajax({
			type: "POST",
	        url: "map_service.php",
	        data: {function:'get_location'},
	        dataType: "text"
		})
		.done(function(data) {
			var myLatlng = new google.maps.LatLng(13.74265700,100.56177700);
			var mapOptions = {
	          center: myLatlng,
	          zoom: 15	
	        };
	        
			var map = new google.maps.Map(document.getElementById("map-canvas"),
	            mapOptions);
	        
	       	
      
			json = jQuery.parseJSON(data);	
					
			for (i=0;i<json.length;i++){
				//alert(json[i].longtitude+json[i].latitude);
				var myLatlng = new google.maps.LatLng(json[i].longtitude,json[i].latitude);
								
				marker = new google.maps.Marker({
				center: myLatlng,
			    position: myLatlng,
			    map: map,
			    title: json[i].mer_name,
			    id: json[i].mer_id
			    
			    
	  		 });
	  		 marker.setMap(map);
	  		 
	  		 google.maps.event.addListener(marker, 'click', function() {
	  		 var link = '<a href="vendingsale1.php?MerID='+this.id + '">vending</a>';	
	  		 var contentString = '<div id="content">'+
		      '<div id="siteNotice">'+
		      '</div>'+
		      '<h1 id="firstHeading" class="firstHeading">'+this.title+'</h1>'+
		      '<div id="bodyContent">'+		     
		      '<p>Attribution:'+link+'</p>'+
		      '</div>'+
		      '</div>';

			  var infowindow = new google.maps.InfoWindow({
			      content: contentString
			  });
    		 	infowindow.open(map,this);
  			 });

			}
    	
		});
				
	});
    
  
    
</script>

</head>

<body>
<div id="header">
	<div class="logo"><a href="index.php" style="color: black;">Machine Online</a></div>
	<div class="user"><a href="login.php" style="float:right;text-decoration: none;">ADMIN</a></div>
</div>
<div id="container">
	
	
	<div id="status"></div>
	<script>
	  // This is called with the results from from FB.getLoginStatus().
	  function statusChangeCallback(response) {
	    console.log('statusChangeCallback');
	    console.log(response);
	    // The response object is returned with a status field that lets the
	    // app know the current login status of the person.
	    // Full docs on the response object can be found in the documentation
	    // for FB.getLoginStatus().
	    if (response.status === 'connected') {
	      // Logged into your app and Facebook.
	      testAPI();
	    } else if (response.status === 'not_authorized') {
	      // The person is logged into Facebook, but not your app.
	      document.getElementById('status').innerHTML = 'Please log ' +
	        'into this app.';
	    } else {
	      // The person is not logged into Facebook, so we're not sure if
	      // they are logged into this app or not.
	      document.getElementById('status').innerHTML = 'Please log ' +
	        'into Facebook.';
		    }
	  }

	  // This function is called when someone finishes with the Login
	  // Button.  See the onlogin handler attached to it in the sample
	  // code below.
	  function checkLoginState() {
	    FB.getLoginStatus(function(response) {
	      statusChangeCallback(response);
	    });
	  }
	
	  window.fbAsyncInit = function() {
		  FB.init({
		    appId      : '768472463198674',
		    cookie     : true,  // enable cookies to allow the server to access 
		                        // the session
		    xfbml      : true,  // parse social plugins on this page
		    version    : 'v2.1' // use version 2.1
		  });

	  // Now that we've initialized the JavaScript SDK, we call 
	  // FB.getLoginStatus().  This function gets the state of the
	  // person visiting this page and can return one of three states to
	  // the callback you provide.  They can be:
	  //
	  // 1. Logged into your app ('connected')
	  // 2. Logged into Facebook, but not your app ('not_authorized')
	  // 3. Not logged into Facebook and can't tell if they are logged into
	  //    your app or not.
	  //
	  // These three cases are handled in the callback function.
	
		  FB.getLoginStatus(function(response) {
		    statusChangeCallback(response);
		  });	
	  };

	  // Load the SDK asynchronously
	  (function(d, s, id) {
	    var js, fjs = d.getElementsByTagName(s)[0];
	    if (d.getElementById(id)) return;
	    js = d.createElement(s); js.id = id;
	    js.src = "//connect.facebook.net/en_US/sdk.js";
	    fjs.parentNode.insertBefore(js, fjs);
	  }(document, 'script', 'facebook-jssdk'));

	  // Here we run a very simple test of the Graph API after login is
	  // successful.  See statusChangeCallback() for when this call is made.
	  function testAPI() {
	    console.log('Welcome!  Fetching your information.... ');
	    
	    FB.api('/me', function(response) {
	      console.log('Successful login for: ' + response.name);
	      document.getElementById('status').innerHTML =
	        'Thanks for logging in, ' + response.name + '!';
	      	      
	    });
	    
	    FB.api(
			"/me/permissions",
			function (response) {
			console.log(response);
			}
		); 
		
	 	FB.api(
		 	"/me/friends",
			function (response) {
			     friendlist = response; 
			     console.log(response);
			}
			if(typeof(friendlist.error) == 'undefined') //pass authen with read_friend authen
			{
				console.log(response);
			}
		);	
			 
	    
	  }
  		
  function fblogout(){
  	 FB.logout(function(response) {
        // Person is now logged out
    });
  }
		
	</script>
	<fb:login-button scope="public_profile,email" onlogin="checkLoginState();"></fb:login-button>
	<br>
  	<br>
  	
	<div id="map-canvas"></div>
  
  
  

 	
 </div>
</body>
</html>
